<template>
    <div class="table-actions">
        <div 
            class="table-action-item" 
            v-for="(item, index) in getActions" 
            :key="`${item.label}-${index}`"
        >
            <el-divider 
                v-if="getActions.length && index != 0" 
                direction="vertical" 
            />
            <el-popconfirm 
                v-if="item.popConfirm" 
                v-bind="item.popConfirm" 
                @confirm="item.popConfirm.confirm"
            >
                <template #reference>
                    <el-button v-bind="filterBinds(item, ['dropDown', 'popConfirm', 'onClick'])">
                        {{ item.label || '' }}
                    </el-button>
                </template>
            </el-popconfirm>
            <el-dropdown 
                v-else-if="item.dropDown && item.dropDown.length"
                v-bind="filterBinds(item, ['dropDown', 'popConfirm', 'onClick', 'icon'])"
            >
                <el-button v-bind="filterBinds(item, ['dropDown', 'popConfirm', 'onClick', 'icon'])">
                    {{ item.label }}<i :class="item.icon" v-if="item.icon"></i>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="(i, iIndex) in getDropDown(item.dropDown)" :key="iIndex">
                            <el-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm" @confirm="i.popConfirm.confirm">
                                <template #reference>
                                    <el-button v-bind="filterBinds(i, ['dropDown', 'popConfirm', 'onClick'])">
                                        {{ i.title || '' }}
                                    </el-button>
                                </template>
                            </el-popconfirm>
                            <el-button v-else v-bind="filterBinds(i, ['dropDown', 'popConfirm', 'onClick'])" @click="i.onClick">
                                {{ i.title || '' }}
                            </el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-button v-else v-bind="filterBinds(item, ['dropDown', 'popConfirm', 'onClick'])" @click="item.onClick">
                {{ item.label || '' }}
            </el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { isBoolean } from '@/utils/is';
import type { ActionItem } from '@/components/BasicForm/src/types';

defineOptions({ name: 'FormAction' });

const props = defineProps<{ actions: ActionItem[] }>();

const isIfShow = (item: ActionItem): boolean => {
  const ifShow = item.ifShow;
  let isIfShow = true;
  if (isBoolean(ifShow)) {
    isIfShow = ifShow;
  }
  return isIfShow;
};

const getActions = computed(() => {
  return (props.actions || []).filter(item => isIfShow(item));
});

const getDropDown = (items: ActionItem[]): ActionItem[] => {
  return items.filter(item => isIfShow(item));
};

const filterBinds = (filterObj: Record<string, any>, filterArr: string[]): Record<string, any> => {
  return Object.keys(filterObj)
    .filter((key) => filterArr.indexOf(key) < 0)
    .reduce((obj: Record<string, any>, key: string) => {
      obj[key] = filterObj[key];
      return obj;
    }, {});
};
</script>
<style lang="scss">
.table-actions {
    margin-left: 10px;
    display: inline-flex;
    flex-wrap: wrap;
}

.table-action-item {
    display: inline-block;
}
</style>